import { Meta, Status, Props, Story } from '../../../../.storybook/components';
import * as Stories from './Tag.stories';

<Meta of={Stories} />

# Tag

<Status variant="stable" />

Tags enable the user to add or remove attributes to a given content, for
example: transaction history for a given day or week.

<Story of={Stories.Base} />
<Props />

## Best practices

- For content within the tag, the text should be no longer than 30 characters.
- Be as concise as possible in wording, limit to one to two words, as to not
  take up too much space.

## Usage guidelines

- **Do** make tags removable by default in order for users to have the
  ability to add and remove them.
- **Do** display tags above or within proximity to the content that needs to be
  filtered.
- **Do** ensure that icons are always displayed on the left of the label, in
  a canvas of 24px.

## Component variations

### Selected

<Story of={Stories.Selected} />

### With prefix

<Story of={Stories.WithPrefix} />

### With suffix

<Story of={Stories.WithSuffix} />

### Clickable

<Story of={Stories.Interactive} />

### Removable

<Story of={Stories.Removable} />
